<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/font-awesome.min.css">
    <script src="../js/jquery-1.12.4.js"></script>
    <script src="../js/index.js"></script>
    <script src="../js/vue.js"></script>
    <link rel="shortcut icon" href="../../../lib/汇 .ico">
    <title>关于我们</title>
</head>
<body>
    <div class="desktop " id='desktop'>
      <component :is='comType' @tocom="changeTocom1"  @tocom3="changeTocom3" ></component>
    </div>
    <template id="mytemp1">
      <div class="desktop1">
     
        <div class="container-fluid">
          
            <div class="head">
                <div class="info">
                    <div class="info-left">
                    <i class="fa fa-signal"></i>  <span id="time"> </span> 
                    </div>
                    <div class="info-right">
                        <i class="fa fa-wifi"></i>  90%<i class="fa fa-battery-full"></i>
                    </div>
                </div>
           
            </div>
          <div class="main">
          
            <div id="pages" class="carousel slide" >
                <!-- Indicators -->
                
                  <ol class="carousel-indicators">
                    <li data-target="#pages" data-slide-to="0" class="active"></li>
                    <li data-target="#pages" data-slide-to="1"></li>
                    <li data-target="#pages" data-slide-to="2"></li>
                  </ol>
                
               
                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                  <div class="item active">
                   <div class="page">
                     <div class="pageinner">
                   
                      <a href="#" class="col-md-2 col-xs-3 col-sm-3">
                        <img  src="../images/setting.png">
                        <div class="toolName">设置</div>
                      </a>
                      <a @click="Tocom4" href="#" class="col-md-2 col-xs-3 col-sm-3">
                        <img  src="../images/QQ.png">
                        <div class="toolName">QQ</div>
                      </a>
                      <a href="#" @click="Tocom3" class="col-md-2 col-xs-3 col-sm-3">
                        <img  src="../images/Safari.png">
                        <div class="toolName">Safari 浏览器</div>
                      </a>
                      <a href="#" class="col-md-2  col-xs-3  col-sm-3">
                        <img  src="../images/Appstore.png">
                        <div class="toolName">App Store</div>
                      </a>
                      <a  href="#" class="col-md-2  col-xs-3  col-sm-3">
                        <img  src="../images/txhuiyi.png">
                        <div class="toolName">腾讯会议</div>
                      </a>
                      <a  href="#" class="col-md-2 col-xs-3 col-sm-3">
                        <img  src="../images/weather.png">
                        <div class="toolName">天气</div>
                      </a>
                      <a href="../../homepage/html/index.html" class="col-md-2 col-xs-3 col-sm-3">
                        <img  src="../images/汇客.png">
                        <div class="toolName">汇客</div>
                      </a>
                  </div>
                   </div>
                  </div>
                  <div class="item">
                    <div class="page">
                      <div class="pageinner">
                     
                      <a href="#" class="col-lg-2 col-xs-3 col-sm-3">
                        <img  src="../images/王者.png">
                        <div class="toolName">王者荣耀</div>
                      </a>
                      <a href="#" class="col-lg-2 col-xs-3 col-sm-3">
                        <img  src="../images/和平精英.png">
                        <div class="toolName">和平精英</div>
                      </a>
                      <a href="#" class="col-lg-2 col-xs-3 col-sm-3">
                        <img  src="../images/飞车.png">
                        <div class="toolName">QQ飞车</div>
                      </a>
                      <a href="#" class="col-lg-2 col-xs-3 col-sm-3">
                        <img  src="../images/卡丁车.png">
                        <div class="toolName">跑跑卡丁车</div>
                      </a>
                      <a href="#" class="col-lg-2 col-xs-3 col-sm-3">
                        <img  src="../images/战双.png">
                        <div class="toolName">战双帕弥什</div>
                      </a>
                      <a href="#" class="col-lg-2 col-xs-3 col-sm-3">
                        <img  src="../images/崩坏.png">
                        <div class="toolName">崩坏三</div>
                      </a>
                      <a href="#" class="col-lg-2 col-xs-3 col-sm-3">
                        <img  src="../images/斗地主.png">
                        <div class="toolName">欢乐斗地主</div>
                      </a>

                    </div>
                    </div>
                  </div>
                  <div class="item">
                    <div class="page">
                      <div class="pageinner">
                      <a href="#" class="col-lg-2 col-xs-3 col-sm-3">
                        <img  src="../images/txhuiyi.png">
                        <div class="toolName">腾讯会议</div>
                      </a>
                      <a href="#" class="col-lg-2 col-xs-3 col-sm-3">
                        <img  src="../images/video.png">
                        <div class="toolName">视频</div>
                      </a>
                    </div>
                    </div>
                  </div>
                </div>
              </div>
          </div>
        
          <div class="foot ">
              <a href="#" class="col-xs-3 col-sm-2" ><img  src="../images/setting.png"></a>
                  <a @click="Tocom4" href="#" class="col-xs-3 col-sm-2" ><img  src="../images/QQ.png"></a>
                  <a href="#" class="col-xs-3 col-sm-2"><img  src="../images/网易云.png"></a>
                  <a href="#" class="col-xs-3 col-sm-2"><img  src="../images/微信.png"></a>
                  <a href="#" class="col-sm-2"><img  src="../images/dingding.png"></a>
                  <a href="#" class="col-sm-2"><img  src="../images/txketang.png"></a>
                  <a href="#"  class="col-sm-2"><img  src="../images/yidongkeda.png"></a>
                  <a href="#" class="col-sm-2"><img  src="../images/txhuiyi.png"></a>
          </div>
        </div>
      
    </div>
    </template>
    <template id='mytemp2'>
      <div class="desktop2">
      
          <div class="container-fluid">
          <div class="head">
                  <div class="info">
                      <div class="info-left">
                      <i class="fa fa-signal"></i>  <span id="time"> </span> 
                      </div>
                      <div class="info-right">
                          <i class="fa fa-wifi"></i>  90%<i class="fa fa-battery-full"></i>
                      </div>
                  </div>
          </div>
           <div class="dialogue">
             <div id='h1' class="me">Hi Sir!</div>
            <div id='h2' class="sir">我在! 请问有什么需要帮助的？</div>
           </div>
           <div class="dialogue">
            <div id='h3' class="me">打开第八组项目!</div>
          <div  id='h4' class="sir">好的!正在打开。</div>
         
        </div>
      <div class="sirImg" ><img id="sirImg" src="../images/sir.png"></div>
              </div>
              
              
      </div>
    </template>
    <template  id="mytemp3">
      <div class="desktop3">
   
        <div class="container-fluid">
          <div class="d3-top">
            
        <div class="head">
                <div class="info">
                    <div class="info-left">
                    <i class="fa fa-signal"></i>   <span id="time"> </span> 
                    </div>
                    <div class="info-right">
                        <i class="fa fa-wifi"></i>  90%<i class="fa fa-battery-full"></i>
                    </div>
                </div>
        </div>
        <div class="browser-head">关于我们 <i  @click="Tocom1" style="cursor: pointer; float: right; margin-top: 10px; margin-right: 20px;" class="fa fa-times"></i></div>
      </div>
        </div>
        <div class="container-fluid">
      <div class="browser">
        <div class="container" style= "margin-bottom: 20px;">
          <img class="img-responsive"  src="../images/team.jpg">
       
        </div>
        <!-- 主体 -->
       
        <div class="container">
          <nav class="navbar navbar-inverse">
          <div class="container-fluid">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>                        
              </button>
              <a class="navbar-brand" href="#">汇客网</a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
              <ul class="nav navbar-nav" id="myNav">
                <li class="active"><a href="#part1">ABOUT US</a></li>
                <li><a href="#part2">OUR TEAM</a></li>
                <li><a href="#part3">PORTFOLIO</a></li>
                <li><a href="#part4">MOTTOS</a></li>
              </ul>
            </div>
          </div>
          </nav>

         
         <!-- 中间 -->
         <div id="part1" class="middle">
          <div class="about">
        <div class="container">
          <div class="row">
            
              <div class="team-info">
                  <div class="info-title">
                    <label></label>
                    "ABOUT US"
                    <label></label>
                  </div>
                  <div class="us">
                  <ul id="myTab">
                    <li >
                      <a  class="now" href="#are" data-toggle="tab">
                         WHO WE ARE?
                      </a>
                    </li>
                    <li><a href="#do" data-toggle="tab">WHAT WE DO?</a></li>
                    <li >
                      <a href="#work"  data-toggle="tab">HOW WE WORK?
                       
                      </a>
                      
                    </li>
                  </ul>
                </div>
                  <div class="us-content">
                  <div  class="tab-content">
                    <div class="tab-pane fade in active" id="are">
                      <p>2020驰星实训第八小组</p>
                    </div>
                    <div class="tab-pane fade" id="do">
                      <p>类似于美团的电商网站吃喝玩乐全都有</p>
                    </div>
                  
                    <div class="tab-pane fade" id="work">
                      <p>通过三周的知识学习,经过明确的分工,在老师和队长的带领下完成</p>
                    </div>
                  </div>
                </div>
             
            </div>
          </div>
           </div>
        </div>
        
        <div id="part2" class="about-img">
          <div class="container">
          <div class="left-img col-xs-10 col-sm-8 col-md-5">
           <img   style="height: 100%; width: 100%;" src="../images/about65.jpg">
           <div class="sub-img"><img  style="height: 100%; width: 100%;" src="../images/about.jpg"></div>
          </div>
          <div class="right-img  col-xs-12 col-md-7">
            <img  style="height: 100%; width: 100%;" src="../images/about-rt.png">
            <div class="belles-lettres" >In fact, you do have the power to choose your own way. You do have the ability to decide what kinds of events, experiences, opportunities and circumstances come your way.</div>
          </div>
        </div>
        </div>
      </div>
     
      <div class="bottom">
        <div class="container">
            <div class="team-info">
          <div class="info-title">
            <label></label>
            "OUR TEAM"
            <label></label>
          </div>
        </div>
        <div class="team-members">
          <div class="member-info col-xs-12 col-sm-6 col-md-4">
            <div class="member-img">
            <img src="../images/cgy.JPG">
             <div class="member-contact">
               <i style="color:skyblue;" class="fa fa-qq"></i>
                <i style="color:green;" class="fa fa-weixin"></i>
                <i style="color:orange;" class="fa fa-picture-o"></i>
             </div>
             <div class="info-content">软件二班 崔广宇</div>
            </div>
         
          </div>
          <div class="member-info col-xs-12 col-sm-6 col-md-4">
            <div class="member-img">
              <img style="width: 200px;height: 200px;" src="../images/cxl.JPG">
               <div class="member-contact">
                 <i style="color:skyblue;" class="fa fa-qq"></i>
                  <i style="color:green;" class="fa fa-weixin"></i>
                  <i style="color:orange;" class="fa fa-picture-o"></i>
               </div>
               <div class="info-content">软件二班 陈玺龙</div>
              </div>
           
         </div>
         <div class="member-info col-xs-12 col-sm-6 col-md-4">
          <div class="member-img">
            <img style="width: 200px;height: 200px;" src="../images/cl.JPG">
             <div class="member-contact">
               <i style="color:skyblue;" class="fa fa-qq"></i>
                <i style="color:green;" class="fa fa-weixin"></i>
                <i style="color:orange;" class="fa fa-picture-o"></i>
             </div>
             <div class="info-content">软件二班 陈磊</div>
            </div>
        
       </div>
       <div class="member-info col-xs-12 col-sm-6 col-md-6">
        <div class="member-img">
          <img style="width: 200px;height: 200px;" src="../images/zyt.JPG">
           <div class="member-contact">
             <i style="color:skyblue;" class="fa fa-qq"></i>
              <i style="color:green;" class="fa fa-weixin"></i>
              <i style="color:orange;" class="fa fa-picture-o"></i>
           </div>
           <div class="info-content">软件二班 赵雨婷</div>
          </div>
      
     </div>
     <div class="member-info col-xs-12  col-sm-6 col-md-6">
      <div class="member-img">
        <img style="width: 200px;height: 200px;" src="../images/fsz.png">
         <div class="member-contact">
           <i style="color:skyblue;" class="fa fa-qq"></i>
            <i style="color:green;" class="fa fa-weixin"></i>
            <i style="color:orange;" class="fa fa-picture-o"></i>
         </div>
         <div class="info-content">软件二班 冯舒展</div>
        </div>
   
   </div>
        </div>
        </div>
        </div>
      </div>
         <!-- 底部 -->
         <div id="part3" class="portfolio">
         
            <div class="team-info">
              <div class="info-title">
                <label></label>
                "PORTFOLIO"
                <label></label>
              </div>
            </div>
            <div class="portfolio-types ">
              <ul id='portfolio'>
              <li data-index="1" >All</li>
              <li  data-index="2">Branding</li>
              <li data-index="3" class="active" >Webdesign</li>
              <li  data-index="4">Photography</li>
          </ul>
          </div>
         <div class="portfolio-imgs">
          <div  data-index="2"  class="portfolio-img col-lg-3 col-xs-4">
            <img  src="../images/g1.jpg">  
           </div>
           <div  data-index="3"  class="portfolio-img col-lg-3 col-xs-4">
            <img  src="../images/g2.jpg">  
           </div>
           <div  data-index="2"  class="portfolio-img col-lg-3 col-xs-4">
            <img  src="../images/g3.jpg">  
           </div>
           <div  data-index="4"  class="portfolio-img col-lg-3 col-xs-4">
            <img  src="../images/g4.jpg">  
           </div>
           <div  data-index="3"  class="portfolio-img col-lg-3 col-xs-4">
            <img src="../images/g5.jpg">  
           </div>
           <div  data-index="2"  class="portfolio-img col-lg-3 col-xs-4">
            <img src="../images/g6.jpg">  
           </div>
       
         </div>
    
         </div>



          <div id="part4" class="mottos">
            <div class="container">
              <div class="team-info">
                <div class="info-title">
                  <label></label>
                  "MOTTOS"
                  <label></label>
                </div>
              </div>
              <div class="wheel-img">
                <img style="width: 100%;height: 100%;" src="../images/cgy.JPG">
              <div class="pre"><img src="../images/frr.png"></div>
              <div class="next"><img src="../images/bcc.png"></div>
              </div>
             <div class="wheel-content">
               <div class="motto">
              不要追求外表，它会骗人；不要追求财富，它会消失；追求一个让你微笑开颜的人吧！因为微笑会让你灰暗的一天豁然开朗、阳光明媚！
            </div>
              <div class="mark-top">
                 <img  src="../images/quote1.png">
               </div>
               <div class="mark-bottom">
                <img  src="../images/quote2.png">
               </div>
             </div>
          
        
            </div>
            </div>
           
            <div @click="Tocom1" class="foot-line">
          </div>
     
      
        </div>
        </div>
          </div>
       
      </div>


    </template>
    <template id="mytemp4">
      <div class="desktop4">
          <div class="QQ">
              <div class="head">
                      <div class="info">
                          <div class="info-left">
                          <i class="fa fa-signal"></i>   <span id="time" > </span> 
                          </div>
                          <div class="info-right">
                              <i class="fa fa-wifi"></i>  90%<i class="fa fa-battery-full"></i>
                          </div>
                      </div>
              </div>
  
              <div class="top-tool">
                消息
                   <div class="QQ-touxiang">
                      <div class="QQ-state"></div>
                   </div>
                   <div class="QQ-camera">
                     <i class="fa fa-camera"></i>
                   </div>
                   <div class="QQ-more">
                    <div class="dropdown">
                    <i class="fa fa-plus "data-toggle="dropdown"> </i>
                  
                    <ul class="dropdown-menu dropdown-position">
                        <div class="jiantou"></div>
                      <li><a href="#"><i class="fa fa-plus-square-o"></i>创建群聊</a></li>
                      <li><a href="#"><i class="fa fa-user-plus"></i>加好友/群</a></li>
                      <li><a href="#"><i class="fa fa-comments"></i>匹配聊天</a></li>
                      <li><a href="#"><i class="fa fa-minus-square-o"></i>扫一扫</a></li>
                      <li><a href="#"><i class="fa fa-paper-plane-o"></i>面对面快传</a></li>
                      <li><a href="#"><i class="fa fa-money"></i>收付款</a></li>
                    </ul>
</div>
                  </div>
              </div>
              
                <div class="QQ-news">
                  <div class="QQ-search">
                    <input type="text">
                    <span><i class="fa fa-search"></i>搜索</span>
                 </div>
                    <table id='newstable' class="table table-hover ">
                   <tr>
                     <td>
                       <img  src="../images/teacher.jpg">
                       <span class="news-sender">
                         平希老师
                       </span>
                       <span class="news-content">老师辛苦了!</span>
                       <span class="send-time">下午3:45</span>
                     </td>
                   </tr>
                   <tr>
                    <td>
                     <img  src="../images/rj.jpg">
                     <span class="news-sender">
                      2017苏理工软件工程
                     </span>
                     <span class="news-content">韩老师：大家务必重视坚持健康打卡@全体成员</span>
                     <span class="send-time">下午2:54</span>
                    </td>
                  </tr>
                   <tr>
                     <td>
                      <img  src="../images/chixing.jpg">
                      <span class="news-sender">
                        江科大软件-苏州驰星实训群
                      </span>
                      <span class="news-content">驰星平老师：[群公告]为期三周的前端实习即将....</span>
                      <span class="send-time">昨天</span>
                     </td>
                   </tr>
                   <tr>
                     <td>
                      <img  src="../images/309.jpg">
                      <span class="news-sender">
                        沙雕网友在线面基
                      </span>
                      <span class="news-content">陈玺龙：?</span>
                      <span class="send-time">下午4:06</span>
                     </td>
                   </tr>
                   <tr>
                     <td>
                      <img  src="../images/304.jpg">
                      <span class="news-sender">
                    304小黄群
                      </span>
                      <span class="news-content">Wow!：乱杀乱杀 上号了</span>
                      <span class="send-time">下午1:33</span>
                     </td>
                   </tr>
                   <tr>
                     <td>
                      <img  src="../images/hsq.jpg">
                      <span class="news-sender">
                       吾弟
                      </span>
                      <span class="news-content">上号 下棋</span>
                      <span class="send-time">下午3:45</span>
                     </td>
                   </tr>
                   
                  <tr>
                    <td>
                     <img  src="../images/cxl.jpg">
                     <span class="news-sender">
                      陈玺龙
                     </span>
                     <span class="news-content">md</span>
                     <span class="send-time">下午3:45</span>
                    </td>
                  </tr>
                  <tr>
                    <td>
                     <img  src="../images/2班.jpg">
                     <span class="news-sender">
                    软件二班
                     </span>
                     <span class="news-content">赵朝哲：已打卡</span>
                     <span class="send-time">上午0:31</span>
                    </td>
                  </tr>
                    </table>
                  
               
              </div>
              <div class="foot-tools">
                <ul>
                  <li class="col-xs-4"><i style="color: #58BFF7;" class="fa fa-commenting"><span style=" right: 25px;">消息</span></i></li>
                  <li  class="col-xs-4"><i class="fa fa-user-circle"> <span style="right: 28px;">联系人</span></i> </li>
                  <li  class="col-xs-4"><i class="fa fa-globe"> <span style="right: 22px;">动态</span></i></li>
                </ul>
              </div>
              <div @click="Tocom4_1"   class="foot-line"> </div>
    </template>
  
    <script src="../js/bootstrap.js"></script>
   
</body>
</html>